<template>
    <view class="top_search">
        <view class="search_read_only">
            <navigator class="search_content" url="/pages/classify/search">
                <i class="iconfont icon-unie036"></i>
                <view class="search_input">Search</view>
            </navigator>
        </view>
    </view>
    <view class="classify" style="height:{{windowHeight-50}}px">
        <scroll-view class="classify_catetory" scroll-y scroll-with-animation="true" style="height:{{windowHeight-50}}px">
            <view class="name {{item.active? 'active':''}}" wx:for="{{rootcateList}}" wx:key="item" @tap="changeCate" data-code="{{item.id}}">
                {{item.name}}
            </view>
        </scroll-view>
        <scroll-view class="classify_detail" bindscrolltolower="onReachBottom" scroll-y scroll-with-animation="true" style="height:{{windowHeight-50}}px">
            <view class="children">
                <filterBar class="filterBarMain" @currentType.user="currentType"></filterBar>
                <!--暂无数据显示-->
                <Placeholder wx:if="{{is_empty}}" message.sync="暂无发现数据"></Placeholder>
                <shopGridList class="shopList" wx:if="{{!is_empty}}"></shopGridList>
            </view>
        </scroll-view>
    </view>
</template>
<script>
    import wepy from 'wepy'
    import api from '@/api/api'
    import {SYSTEM_INFO, SEL_CLASS_CODE} from '@/utils/constant'

    import tip from '@/utils/tip'
    import shopGridList from '../../components/shop_grid_list'
    import FilterBar from '../../components/classify/filter_bar'
    import Placeholder from '../../components/common/placeholder'

    export default class Classify extends wepy.page {
      config = {
        navigationBarTitleText: '分类'
      }
      components = {
        shopGridList: shopGridList,
        filterBar: FilterBar,
        Placeholder: Placeholder
      }

      data = {
        scrollTop: 100,
        windowHeight: 0,
        list: {},
        //一级分类数据
        rootcateList: [],
        prodList: [], // 商品列表
        page_total: '',
        is_empty: false,
        form: {
          page: 1,
          limit: 10
        } //搜索数据
      }
      async getChildCate(type) {
        const t = this
        const a = await api.goodsSearch({
          query: t.form
        })
        if (a.data.code == 0) {
          t.page_total = Math.ceil(a.data.data.total / t.form['limit'])
          t.form['page'] = a.data.data.page
          if (type) {
            t.prodList = [...t.prodList, ...a.data.data.rows]
          } else {
            t.prodList = a.data.data.rows
          }

          if (t.prodList.length > 0) {
            t.is_empty = false
          } else {
            t.is_empty = true
          }
          t.$invoke('shopGridList', 'eachItem', t.prodList)
          t.$apply()
        } else {
          tip.error(a.data.msg)
        }
      }
      async getRootCateTopLevel() {
        const t = this
        const a = await api.goodsCateSearch({}, 'NAV')
        if (a.data.code == 0) {
          this.rootcateList = a.data.data
          if (this.rootcateList.length > 0) {
            let selCode = wx.getStorageSync(SEL_CLASS_CODE)
            if (selCode == '') {
              this.rootcateList[0].active = true
            } else {
              this.rootcateList.forEach((k, i) => {
                if (selCode == k.id) {
                  this.rootcateList[i].active = true
                }
              })
            }
            t.form['page'] = 1
            t.form['params["categoryId"]'] = selCode
            t.form['sortField'] = 'createTime'
            t.form['dir'] = 'DESC'
            this.getChildCate()
          }
        } else {
          tip.error(a.data.msg)
        }
        this.$apply()
      }
      onShow() {
        this.getRootCateTopLevel();
        this.windowHeight = wx.getSystemInfoSync().windowHeight;
      }

      computed = {}
      methods = {
        changeCate(e) {
          const t = this
          let code = e.currentTarget.dataset.code
          t.form['page'] = 1
          t.form['params["categoryId"]'] = code
          t.form['sortField'] = 'createTime'
          t.form['dir'] = 'DESC'
          t.getChildCate()
          wepy.setStorageSync(SEL_CLASS_CODE, code)
          //设置一级分类的选中状态
          t.rootcateList.forEach((k, i) => {
            t.rootcateList[i].active = false
            if (code == k.id) {
              t.rootcateList[i].active = true
            }
          })
        },
        //      过滤器的type
        currentType(obj) {
          const t = this
          delete t.form['sortField']
          delete t.form['params["size"]']
          delete t.form['params["nts"]']
          delete t.form['dir']
          let name = obj.name,
            type = obj.type,
            size = obj.size
          if (name == 'zonghe') {
            t.form['sortField'] = 'sum_pay'
          } else if (name == 'sale') {
            t.form['params["nts"]'] = 1
          } else if (name == 'price') {
            t.form['sortField'] = 'amount'
            if (type == 'desc') {
              t.form['dir'] = 'ASC'
            } else if (type == 'asc') {
              t.form['dir'] = 'DESC'
            }
          } else if (name == 'sku') {
            if (size) {
              t.form['params["size"]'] = size
            }
          }
          t.getChildCate()
        },
        onShareAppMessage: function(res) {
          if (res.from === 'button') {
            // 来自页面内转发按钮
            console.log(res.target)
          }
          return {
            title: this.detail.name,
            path: '/pages/classify/classMain',
            success: function(res) {
              // 转发成功
            },
            fail: function(res) {
              // 转发失败
            }
          }
        }
      }
      events = {}
      //加载更多
      onReachBottom() {
        let that = this
        that.showLoading = true
        if (that.page_total > that.form['page']) {
          that.form['page']++
          that.getChildCate(1)
        } else {
          that.showLoading = false
        }
      }
    }
</script>
<style lang="less">
.search_read_only {
    width: 710rpx;

    .search_content {
        width: 100%;
        background: #f5f5f9;
        border: 1px solid #efefee;
        border-radius: 10rpx;
        position: relative;
    }

    .icon-unie036 {
        color: #ccc;
        position: absolute;
        top: 0rpx;
        left: 20rpx;
        z-index: 99999;
        font-size: 30rpx;
    }
    .search_input {
        color: #ccc;
        padding-left: 40rpx;
    }
}

.classify {
    display: flex;
    position: relative;
    overflow: hidden;
    .classify_catetory {
        width: 160rpx;
        position: relative;
        z-index: 999999;
        display: inline-block;
        .name {
            text-align: center;
            height: 100rpx;
            line-height: 100rpx;
            font-size: 28rpx;
            color: #666;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .active {
            border-left: 6rpx solid #ff6a3c;
            background: #fff;
            color: #ff6a3c;
        }
    }
    .classify_detail {
        position: relative;
        z-index: 999;
        background: #fff;
        padding: 0 10px 10px 10px;
        flex:1;
        .classify_item {
        }
        .title {
            font-size: 30rpx;
            color: #333;
            margin-left: 25rpx;
        }
        .children {
            flex-wrap: wrap;
            margin: 0;
            .empty-placeholder {
                position: absolute;
                top: 200rpx;
            }
            .shopList{
                margin-top: 50rpx;
                .list{
                    height: auto;
                }
                .image_box image{
                    height: 260rpx;
                }
            }
            .filterBarMain{
                position: fixed;
                top: 96rpx;
                right: 10rpx;
                z-index: 99;
                width: 100%;
                box-sizing: border-box;
                padding-left: 186rpx;
            }
        }
        .child_image {
            width: 60px;
            height: 60px;
        }
        .child_name {
            font-size: 26rpx;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 170rpx;
        }
        .children_item {
            height: 200rpx;
            width: 170rpx;
            text-align: center;
        }
    }
    .sdd {
        box-sizing: border-box;
        padding-left: 186rpx;
        height: 100vh;
        background: none;
        > view {
            background: #f5f5f9;
        }
        .tab_button {
            padding: 10rpx 14rpx 10rpx 20rpx;
            padding-bottom: 20rpx;
        }
        .tba_list {
            width: 102%;
        }
    }
}
</style>
